<template>
  <div id="app">
   <router-view ></router-view>
    <!--<button @click="send()">发送消息</button>-->
  </div>
</template>
<script>
export default {
  name: "App",
  data(){
    return{
      websocket:null
    }
  },
  mounted(){
    // this.initSocket();
  },
  methods:{

    initSocket(){
      this.websocket = null;
      //判断当前浏览器是否支持WebSocket
      if ('WebSocket' in window) {
        this.websocket = new WebSocket("ws://localhost:8081/autoMonitor/websocket");
      } else {
        alert('当前浏览器 Not support websocket')
      }

      //连接发生错误的回调方法
      this.websocket.onerror = function () {
      };

      //连接成功建立的回调方法
      this.websocket.onopen = function () {
      }

      //接收到消息的回调方法
      this.websocket.onmessage = function (event) {
          console.log(event)
      }

      //连接关闭的回调方法
      this.websocket.onclose = function () {

      }

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = function () {
        this.closeWebSocket();
      }
    },
    closeWebSocket(){
      this.websocket.close();
    },
    send(){
      this.websocket.send("sss");
    }

  },

}
</script>

<style>
  @import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
  @import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
  .ag-gramework-text-filter .ag-body-viewport {
    overflow-y: scroll !important;
  }
  .ag-gramework-date-range-filter {
    padding: 5px;
  }
  .ag-gramework-date-range-filter > div {
    margin-bottom: 5px;
  }
  .ag-gramework-date-range-filter > div input[type="text"] {
    padding-left: 30px !important;
  }

  .ag-tool-panel-wrapper {
    width: 235px;
  }
  .ag-theme-balham .ag-side-bar,
  .ag-theme-balham .ag-side-bar .ag-side-buttons .ag-selected button,
  .ag-theme-balham .ag-header,
  .ag-theme-balham .ag-tab-header {
    background-color: #f9fafd;
  }
  .ag-theme-balham .ag-menu .ag-menu-option-active {
    background-color: rgba(37, 173, 243, 0.1);
  }
  .ag-theme-balham .ag-tab-header .ag-tab.ag-tab-selected,
  .ag-theme-balham .ag-header,
  .ag-theme-balham .ag-tool-panel-wrapper,
  .ag-theme-balham .ag-status-bar,
  .ag-theme-balham .ag-root,
  .ag-theme-balham .ag-side-bar,
  .ag-theme-balham .ag-side-bar .ag-side-buttons,
  .ag-theme-balham .ag-side-bar .ag-side-buttons .ag-selected button,
  .ag-theme-balham .ag-tool-panel-wrapper .ag-column-drop,
  .ag-theme-balham .ag-tool-panel-wrapper .ag-column-select-panel,
  .ag-theme-balham .ag-primary-cols-header-panel,
  .ag-theme-balham .ag-tool-panel-wrapper .ag-pivot-mode-panel,
  .ag-theme-balham .ag-row,
  .ag-theme-balham .ag-menu,
  .ag-theme-balham .ag-theme-balham.ag-dnd-ghost,
  .ag-theme-balham .ag-cell-inline-editing,
  .ag-theme-balham .ag-popup-editor,
  .ag-theme-balham .ag-select-agg-func-popup,
  .ag-theme-balham .ag-overlay-loading-center,
  .ag-theme-balham .ag-tab-header {
    border-color: #e9eff8;
  }
  .ag-theme-balham .ag-tab-header .ag-tab.ag-tab-selected {
    border-bottom-width: 0;
  }
  .ag-theme-balham .ag-menu .ag-menu-separator > span {
    height: 4px;
  }
  .ag-theme-balham .ag-tool-panel-wrapper {
    border: 1px solid #e9eff8;
  }
  .ag-header-cell-menu-button {
    opacity: 1 !important;
  }
</style>
